<template>
	<view class="ker_address">
		
		<view class="ker_item">
			<text class="ker_item_l">收货人</text>
			<input type="text" placeholder="请填写收货人姓名" v-model="nameVal" class="ker_item_r">
			<text class="clear_icon" v-if="nameVal" @tap="delInputCon('name')" ref="nameRef">x</text>
		</view>
		
		<view class="ker_item">
			<text class="ker_item_l">手机号码</text>
			<input type="number" :maxlength="telLen" placeholder="请填写收货人手机号码" v-model="telVal" class="ker_item_r">
			<text class="clear_icon" v-if="telVal" @tap="delInputCon('tel')">x</text>
		</view>
		
		<view class="ker_item">
			<text class="ker_item_l">收货地址</text>
			<view class="ker_address_select">
				<uni-data-picker :localdata="getCityData" popup-title="请选择地区" @change="onchange"  @nodeclick="onnodeclick" >
					<text v-if="cityAddress">{{cityAddress}}</text>
					<text v-else class="choose_text">请选择</text>

				</uni-data-picker>
				</uni-data-picker>
			</view>
			<view class="location_icon" @tap="clickLoacation">
				<text class="ker_iconfont ker_location"></text>
			</view>
		</view>
		
		<view class="ker_item">
			<text class="ker_item_l">详细地址</text>
			<textarea  placeholder="如楼道、楼盘号等" auto-height="true" v-model="detailsAddress" class="ker_item_r" />
			<text class="clear_icon" v-if="detailsAddress" @tap="delInputCon('address')">x</text>
		</view>
		
		<!-- 首次添加，默认勾选  其余为手动选中 -->
		<view class="ker_address_radio">
			<label class="radio"><radio value="r1" :checked="isChecked ? true: false" @tap="radioChange" />设为默认地址</label>
		</view>
		
		<button type="primary" class="address_btn" @tap="saveHandle">保存</button>
		<button type="default" class="address_btn" @tap="deleteHandle">删除</button>
	</view>
</template>

<script>
	/* 
	* @description 收货地址编辑
	* @property {Boolean} isFirst   是否是首次添加地址
	* @property {Object} addressData  地址数据,后端获取
	*   value{ 
		    name: '张三',    //姓名
				tel: '13845678952',   //号码，11位
				address: {    //省市区、镇，无下限
					province: '新疆发动机发货大街上佛好好干狂欢节',
					city: '海口市',
					area: '龙华区'
				},
				detailsAddress: '海南省海口市龙华区滨海南省海口市龙华区滨海国际金融中心海国际金融中心',   //详情地址
				checked: false    //是否设置为默认地址
	*   }
	* @property {Function} @saveVal  向外返出地址编辑的每个字段
	*/
	const cityData = require('./picker.city.js')
	export default {
		name:"ker-address",
		props:{
			//是否是首次添加
			isFirst: {
				type: Boolean,
				default: false,
			},
			//地址数据
			addressData: {
				type: Object,
				default() {
					return{}
				}
			}
			
		},
		data() {
			return {
				isChecked: false,  //是否选为默认地址
				getCityData: cityData,   //省市区数据
				detailsAddress: '',  //详细地址
				nameVal: '',
				telVal: '',
				telLen: 11,  //手机号码长度
				cityAddress: '',  //地址
				chooseAddress: {
					name: "",
					address: "",
					lat: '',
					lng: ""
				},
			};
		},
		created() {
			const addr = uni.getStorageSync('address');
			if (addr) {
				this.chooseAddress = {
					name: addr.name,
					address: addr.address,
					lat: addr.lat,
					lng: addr.lng
				};
			}
			this.detailsAddress = this.chooseAddress.address;  //从存储中获取详细位置
			this.init()
			
			
		},
		watch:{
			isFirst: {
				immediate: true,
				handler(e) {
					this.isChecked = e;
				}
			}
		},
		methods: {
			/*  初始化数据 */
			init() {
				this.nameVal = this.addressData.name;
				this.telVal = this.addressData.tel;
				if(JSON.stringify(this.addressData.address)!='{}'){
					this.cityAddress = this.addressData.address.province+'/'+this.addressData.address.city+'/'+this.addressData.address.area;
				}
				this.detailsAddress = this.addressData.detailsAddress;
				
			},
			/* 点击定位 */
			clickLoacation() {
				let _this = this;
					uni.chooseLocation({
						success: function (res) {
							console.log('位置名称：' + res.name);
							console.log('详细地址：' + res.address);
							console.log('纬度：' + res.latitude);
							console.log('经度：' + res.longitude);
							_this.detailsAddress = res.address;
							uni.setStorageSync('address', {
								name: res.name,
								address: res.address,
								lat: res.latitude,
								lng: res.longitude
							})
						}
					});
			},
			onchange(e) {
				//选择完成时触发 {detail: {value}}
				 const value = e.detail.value;
				 let arr =[] ;
				 value.forEach((e,index) =>{
					return arr.push(e.text) 	
				 })	
				 this.cityAddress = (arr.toString()).replace(/\,/g, '/')
			},
			onnodeclick() {
				//节点被点击时触发
			},
			/* toast提示 */
			commonToast(title) {
				uni.showToast({
					title: title,
					icon:"none"
				})
			},
			/* 保存 */
			saveHandle(){
				//判断
				if(!this.nameVal.trim()){
					this.commonToast('请填写收货人姓名')
				} else {
					if(!this.telVal.trim()) {
						this.commonToast('请填写收货人手机号码')
					} else {
						let regNum = !(/^1[3456789]\d{9}$/.test(this.telVal.trim()));
						if(regNum || this.telLen < 11){
							this.commonToast('请填写正确的手机号码')
						} else{
							if(!this.cityAddress) {
								this.commonToast('请选择省市区信息');
							} else {
								if(!this.detailsAddress.trim()){
									this.commonToast('请填写详细地址');
								}
							}
						}
					}
				}
				/* 保存后，每个字段的值 */
				this.$emit('saveVal',{
					name: this.nameVal,
					tel: this.telVal,
					city: this.cityAddress,
					detlAds: this.detailsAddress,
					isDefault: this.isChecked,
				})
			},
			/* 删除 */
			deleteHandle() {
				uni.showModal({
					title:'',
					content: '确定要删除吗',
						success: function (res) {
							if (res.confirm) {
								uni.showToast({
									title: '删除成功',
									icon:"none"
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
				})
			},
			/* 点击关闭按钮，清除input框的内容 */
			delInputCon(e){
				if(e==='name'){
					this.nameVal =''
				} 
				if(e==='tel'){
					this.telVal =''
				} 
				if(e==='address'){
					this.detailsAddress =''
				} 
			},
			
			/* 默认地址操作 */
			radioChange() {
				this.isChecked =!this.isChecked;
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	@import  "../common/common.scss";
	.ker_address{
		background: #fff;
		border-radius: 20rpx;
		.ker_item{
			position: relative;
			 width: 100%;
			 padding: 20rpx 32rpx;
			 box-sizing: border-box;
			 display: flex;
			 justify-content: space-between;
			 align-items: center;
			 overflow: hidden;
			 color: #323233;
			 font-size: 28rpx;
			 line-height: 48rpx;
			 background-color: #fff;
			 &::after{
				 position: absolute;
				 box-sizing: border-box;
				 content: ' ';
				 pointer-events: none;
				 right: 16px;
				 bottom: 0;
				 left: 16px;
				 border-bottom: 1px solid #ebedf0;
				 -webkit-transform: scaleY(0.5);
				 transform: scaleY(0.5);
			 }
			 .ker_item_l{
				 width: 22%;
			 }
			 .ker_item_r{
				 flex: 1;
				 padding-right: 40rpx;
				 box-sizing: border-box;
			 }
			 .ker_address_select{
				 flex: 1;
				 margin: 0 20rpx;
			 }
			 .location_icon{
				 padding: 16rpx;
			 }
			 .clear_icon{
				 width: 30rpx;
				 height: 30rpx;
				 border-radius: 50%;
				 color: #fff;
				 background: #C9C9C9;
				 font-size: 20rpx;
				 line-height: 20rpx;
				 display: flex;
				 justify-content: center;
				 align-items: center;
			 }
		}
		.ker_address_radio{
			padding: 50rpx 32rpx;
			box-sizing: border-box;
		}
		.address_btn{
			margin-bottom: 20rpx;
		}
		.choose_text{
			color: #818181;
		}
	}

</style>
